Bootstrap Snippet CodePen Home Testimonial (Client-Review) Manish Yadav using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Testimonial</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div id="testimonial-slider" class="owl-carousel">
                <div class="testimonial">
                    <div class="pic">
                        <img src="https://static.pexels.com/photos/529928/pexels-photo-529928.jpeg" alt="" class="img-responsive">
                    </div>
                    <h3 class="testimonial-info">
                        krystal
                        <small>Web Developer</small>
                    </h3>
                    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis.</p>
                </div>
                <div class="testimonial">
                    <div class="pic">
                        <img src="http://www.markharwood.plus.com/images/people%20large/people8.jpg" alt="" class="img-responsive">
                    </div>
                    <h3 class="testimonial-info">
                        Diana
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h3{
            margin: 0;
        }
        a:hover, a:focus{
            text-decoration: none;
        }
        .testimonial{
            background: #4D241C ;
            padding: 30px 32px 30px 90px;
            margin: 50px 20px 50px 120px;
            border-radius: 0 100px 100px 0;
            color: #fff;
            position: relative;
            border: 5px solid #D0AB6D;
        }
        .testimonial .pic{
            width: 210px;
            height: 210px;
            line-height: 200px;
            border-radius: 50%;
            border: 14px solid #D0AB6D;
            position: absolute;
            top: -15px;
            left: -120px;
            overflow: hidden;
        }
        .testimonial .pic img{
            width: 100%;
            height: 100%;
        }
        .testimonial .testimonial-info{
            display: inline-block;
            width: 35%;
            float: left;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CodePen Home Testimonial (Client-Review) Manish Yadav"
Bootstrap 4.1.1 Snippet by Manish Yadav

Related: See More

Questions / Comments:

"CodePen Home Testimonial (Client-Review) Manish Yadav" Bootstrap 4.1.1 Snippet by Manish Yadav

Related: See More

Questions / Comments:

"CodePen Home Testimonial (Client-Review) Manish Yadav"
Bootstrap 4.1.1 Snippet by Manish Yadav